<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>游戏选单</title>
    <link rel="shotcut icon" href="/f/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/f/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/f/shop.css?1">
    <script src="/f/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/f/vue.js"></script>
</head>

<body>
<div id="app">
    <nav class="navbar navbar-expand-sm home-menu">
        <a class="navbar-brand" href="/">
            <img src="/f/logo.png" class="d-inline-block align-center" height="40px">
            <span style="color:white">欢迎选择游戏</span>
        </a>
    </nav>

    <div class="main" v-if="page==1">
        <h4>第一步: 选择版本和硬盘</h4>
        <h5>主机系统版本</h5>
        <table class="table table-bordered">
            <tr>
                <td @click="">
                    <input type="checkbox" :checked="">5.05</input>
                </td>
                <td @click="">
                    <input type="checkbox" :checked="">6.72</input>
                </td>
                <td @click="">
                    <input type="checkbox" :checked="">7.02</input>
                </td>
                <td @click="">
                    <input type="checkbox" :checked="">7.50</input>
                </td>
                <td @click="">
                    <input type="checkbox" :checked="">9.00</input>
                </td>
            </tr>
        </table>
        <p>
        <h5>硬盘大小</h5>
        <div class="container-fluid">
          <div class="row">
            <div class="hdd-item col-sm-6"><input type="radio" :checked="cap==465">500G=465G可用</input></div>
            <div class="hdd-item col-sm-6"><input type="radio" :checked="cap==465">500G=465G可用</input></div>
            <div class="hdd-item col-sm-6"><input type="radio" :checked="cap==465">500G=465G可用</input></div>
            <div class="hdd-item col-sm-6"><input type="radio" :checked="cap==465">500G=465G可用</input></div>
            <div class="hdd-item col-sm-6"><input type="radio" :checked="cap==465">500G=465G可用</input></div>
          </div>
        </div>
        <table class="table table-bordered">
            <tr>
                <td @click="setcap(1, '500G', 465)">
                    <input type="radio" :checked="cap==465">500G=465G可用</input>
                </td>
                <td @click="setcap(1, '1T', 931)">
                    <input type="radio" :checked="cap==931">1T=931G用</input>
                </td>
                <td @click="setcap(1, '1T', 931)">
                    <input type="radio" :checked="cap==931">1T=931G用</input>
                </td>
            </tr>
            <tr>
                <td @click="setcap(1, '2T', 1860)">
                    <input type="radio" :checked="cap==1860">2T=1860G可用</input>
                </td>
                <td @click="setcap(1, '3T', 2790)">
                    <input type="radio" :checked="cap==2790">3T=2790G可用</input>
                </td>
                <td @click="setcap(1, '1T', 931)">
                    <input type="radio" :checked="cap==931">1T=931G用</input>
                </td>
            </tr>
            <tr>
                <td @click="setcap(1, '4T', 3720)">
                    <input type="radio" :checked="cap==3720">4T=3720G可用</input>
                </td>
            </tr>
        </table>
    </div>

    <!-- 弹窗 -->
    <div id="dialog1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <h5>赛博朋克</h5>
          <ul class="list-group">
            <li class="list-group-item">
              <div><input type="checkbox" :checked="">欧版</input></div>
              <div class="option"><input type="checkbox" :checked="">赛博朋克1.0本体</input></div>
              <div class="option"><input type="checkbox" :checked="">赛博朋克升级补丁</input></div>
              <div class="option"><input type="checkbox" :checked="">赛博朋克DLC-1</input></div>
            </li>
            <li class="list-group-item">
              <div><input type="checkbox" :checked="">欧版</input></div>
              <div class="option"><input type="checkbox" :checked="">赛博朋克1.0本体</input></div>
              <div class="option"><input type="checkbox" :checked="">赛博朋克升级补丁</input></div>
              <div class="option"><input type="checkbox" :checked="">赛博朋克DLC-1</input></div>
            </li>
          </ul>
          <div class="clearfix" style="margin-top:5px">
            <button class="btn btn-danger float-right">选入安装</button>
          </div>
        </div>
      </div>
    </div>

    <div class="main" v-if="page==2">
        <h4>第二步: 选择要玩的游戏</h4>
        <div >
            <input style="width:100%" type="text" v-model="keyword" placeholder="搜索游戏名称或拼音">

            <div class="clearfix">
              <ul class="list-group list-group-flush pre-scrollable float-left">
                <li class="list-group-item active">射击</li>
                <li class="list-group-item">角色</li>
                <li class="list-group-item">动作</li>
                <li class="list-group-item">冒险</li>
              </ul>

              <ul class="list-group pre-scrollable float-rigth">
                <li class="list-group-item" v-for="(g, index) in games" v-if="searchFilter(g)" @click="addGame(g)" :class="{ active:g.added }">
                    <div class="card">
                        <div class="card-horizontal">
                            <div class="img-square-wrapper">
                                <img class="" src="http://via.placeholder.com/300x180" alt="Card image cap" width="100" height="100">
                            </div>
                            <div class="card-body">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">容量: 1G</p>
                                <button class="btn btn-danger rounded-circle float-right">+</button>
                            </div>
                        </div>
                    </div>
                </li>

              </ul>
            </div>
        </div>

        <footer class="footer clearfix">
          <div class="btn-group dropup float-left">
            <button type="button" class="btn btn-warning dropdown-toggle" style="background-color:#fffbd5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              🛒 <span class="badge badge-pill badge-danger">4</span>
            </button>
            <div class="dropdown-menu mt-0 w-100 shadow border-outline-success">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>

          <div class="float-left" style="margin-left: 10px;">容量(G): 0</div>
          <button type="button" class="btn btn-danger float-right">
            提交
          </button>
        </footer>
    </div>

    <div class="main" v-if="page==3">
        <h4>第三步: 把订单编号发给客服</h4>
        <h5>订单信息</h5>
        <div>订单编号: X1234</idv>
        <div class="tip">把该单号或截图此页发给您的购物平台客服，委托他们把游戏安装到选购的硬盘内就可以了！（代拷贝请查看本页面下面联系方式）
        </div>

        <h5>商家信息</h5>
        <div>店铺信息: 单机永伴</div>
        <div>店铺电话: 13027732793</div>
        <div>店铺地址: 河南省郑州市中原区秦岭路六合幸福门1期10号楼1402</div>
        <p/>

        <h5>订单明细</h5>
        <ul class="list-group pre-scrollable">
          <li class="list-group-item" v-for="(g, index) in games" v-if="searchFilter(g)" @click="addGame(g)" :class="{ active:g.added }">
              <div class="card">
                  <div class="card-horizontal">
                      <div class="img-square-wrapper">
                          <img class="" src="http://via.placeholder.com/300x180" alt="Card image cap" width="100" height="100">
                      </div>
                      <div class="card-body">
                          <h4 class="card-title">Card title</h4>
                          <p class="card-text">容量: 1G</p>
                      </div>
                  </div>
              </div>
          </li>
        </ul>
        <div class="text-center">共10个游戏 共计: 300/500G</div>
    </div>
</div>

<script>
$("#dialog1").modal({show:true});
</script>
</body>
</html>